<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top">
    <div class="container clearfix">
        <div class="t-left">
            <h3><img src="img/1.jpg" alt="">中国天气预报</h3>
        </div>
        <div class="t-right clearfix">
            <p class="cit">当前城市：<span id="city">泊头</span></p>
            <input type="text" placeholder="请输入要搜索的城市" id="pit">
            <img src="img/search.jpg" alt="">
        </div>
    </div>
</div>
<div class="middle">
    <div class="container clearfix" id="hour">
        <div class="pa">
            <div class="date-1 de">
                <h4 class="time"><span id="time"></span>(今天)</h4>
                <p class="ti">天气：<span id="now"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-2 de">
                <h4 class="time"><span id="time1"></span>(明天)</h4>
                <p class="ti">天气：<span id="now1"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-3 de">
                <h4 class="time"><span id="time2"></span>(后天)</h4>
                <p class="ti">天气：<span id="now2"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-4 de">
                <h4 class="time"><span id="time3"></span></h4>
                <p class="ti">天气：<span id="now3"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-5 de">
                <h4 class="time"><span id="time4"></span></h4>
                <p class="ti">天气：<span id="now4"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-6 de">
                <h4 class="time"><span id="time5"></span></h4>
                <p class="ti">天气：<span id="now5"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
        <div class="pa">
            <div class="date-7 de">
                <h4 class="time"><span id="time6"></span></h4>
                <p class="ti">天气：<span id="now6"></span></p>
                <p class="tem">温度：<span></span> / <i></i>  ℃</p>
                <p class="wind">风向：<span></span></p>
            </div>
        </div>
    </div>
</div>

<div class="bottom">
    <div class="title">
        <span>分时段预报</span>
    </div>
    <div class="container">
        <div class="branch clearfix">
            <div class="br-1">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-2">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-3">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-4">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-5">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-6">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
            <div class="br-7">
                <p class="bran"><span></span>时</p>
                <p class="fen"><span></span></p>
                <p class="ji"><span></span></p>
            </div>
        </div>
       <div class="life clearfix">
           <div class="title1">
               <span>生活指数</span>
           </div>
           <div class="bo">
               <div class="f-1 clearfix">
                   <div class="f-left">
                       <img src="img/tai.jpg" alt="">
                        <span>紫外线指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-1"></span>
                       <span class="a-1"></span>
                   </div>
               </div>
           </div>
           <div class="bo">
               <div class="f-2 clearfix">
                   <div class="f-left">
                       <img src="img/pcjf.png" alt="">
                       <span>减肥指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-2"></span>
                       <span class="a-2"></span>
                   </div>
               </div>
           </div>
           <div class="bo">
               <div class="f-3 clearfix">
                   <div class="f-left">
                       <img src="img/xt.png" alt="">
                       <span>健康指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-3"></span>
                       <span class="a-3"></span>
                   </div>
               </div>
           </div>
           <div class="bo">
               <div class="f-4 clearfix">
                   <div class="f-left">
                       <img src="img/yi.jpg" alt="">
                       <span>穿衣指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-4"></span>
                       <span class="a-4"></span>
                   </div>
               </div>
           </div>
           <div class="bo">
               <div class="f-5 clearfix">
                   <div class="f-left">
                       <img src="img/che.jpg" alt="">
                       <span>洗车指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-5"></span>
                       <span class="a-5"></span>
                   </div>
               </div>
           </div>
           <div class="bo">
               <div class="f-6 clearfix">
                   <div class="f-left">
                       <img src="img/zhong.jpg" alt="">
                       <span>空气污染扩散指数</span>
                   </div>
                   <div class="f-right">
                       <span class="b-6"></span>
                       <span class="a-6"></span>
                   </div>
               </div>
           </div>
       </div>
    </div>
</div>

<script src="js/script.js"></script>
</body>
</html>